<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    @include('public.h5_head')
    <title>帐单查询</title>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/bill.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/mobiscroll.core-2.5.2.css"  />
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/mobiscroll.android-ics-2.5.2.css"  />
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/common.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/mobiscroll.core-2.5.2.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/mobiscroll.datetime-2.5.1.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/mobiscroll.android-ics-2.5.2.js"></script>
<body>
<div id="bill_box">
    <div class="wrap">
        <div class="bill">
            <ul class="bill_ul">
                <li class="bill_li" id="33">
                    <span class="bill_sp">购买日期</span>
                    <input class="date_start" id="data" type="text" placeholder="购买日期（选填）" />
                    <span class="bill_interval">-</span>
                    <input class="date_end" id="data" type="text" placeholder="购买日期（选填）" />
                </li>
                <li class="bill_li">
                    <span class="bill_sp">手机号码</span>
                    <input class="bill_tel" maxlength="11" type="text" placeholder="请填写手机号码（选填）" />
                </li>
                <li class="bill_li">
                    注:以上条件均为必填项
                </li>
            </ul>
            <div class="bill_btn"><a href="javascript:;">查询</a></div>
        </div>
    </div>
    <div class="bill_hide" style="display:none;">
        <p class="bill_pass"></p>
        <p class="bill_ok">确定</p>
    </div>
    <div class="bill_mask" style="display:none;"></div>
</div>
<script>
    /*时间选择*/
    $(function() {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = {preset:'date',stepMinute:1};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'bottom', //显示方式
            mode: 'scroller', //日期选择模式
            lang: 'zh',
            startYear: currYear-2, //开始年份currYear - 10,
            endYear: currYear,//结束年份currYear + 10
            setText: '确定',
            cancelText: '取消',
            /*清楚默认样式，更改中文模式*/
            dateFormat: 'yyyy/mm/dd',
            dateOrder: 'yymmdd',
            dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'],
            dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
            dayText: '日',
            hourText: '时',
            minuteText: '分',
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthText: '月',
            secText: '秒',
            timeFormat: 'HH:ii',
            timeWheels: 'HHii',
            yearText: '年'
        };
        var optDateTime = $.extend(opt['date'], opt['default']);//年月日型
        $(".date_start").mobiscroll(optDateTime).date(optDateTime);
        $(".date_end").mobiscroll(optDateTime).date(optDateTime);
    });
    /*点击查询按钮*/
    function date(){
        var s1=$('.date_start').val();/*获取初始购买日期*/
        var s2=$('.date_end').val();/*获取结束购买日期*/
        var date1 = new Date(s1).getTime();
        var date2 = new Date(s2).getTime();
        if(date1>date2){
            $(".bill_pass").html('开始时间不能大于结束时间');
            $(".bill_hide").show();
            $(".bill_mask").show();
            return false;
        } else{
            return true;
        }
    }
    //点击确定隐藏
    $(".bill_ok").click(function(){
        $(".bill_hide").hide();
        $(".bill_mask").hide();
    })
    $('.bill_btn').click(function(){
        var s1=$('.date_start').val();/*获取初始购买日期*/
        var s2=$('.date_end').val();/*获取结束购买日期*/
        var s3=$('.bill_tel').val();
        var reg=/^1(3|4|5|7|8)[0-9]{9}$/
        if(s1=="" && s2=="" && s3==""){
            $(".bill_pass").html('以上选项不能为空');
            $(".bill_hide").show();
            $(".bill_mask").show();
        }else if(s1=="" ){
            $(".bill_pass").html('开始时间不能为空');
            $(".bill_hide").show();
            $(".bill_mask").show();
        }else if(s2==""){
            $(".bill_pass").html('结束时间不能为空');
            $(".bill_hide").show();
            $(".bill_mask").show();
        }else if(s3==""){
            $(".bill_pass").html('手机号码不能为空');
            $(".bill_hide").show();
            $(".bill_mask").show();
        }else if(!reg.test(s3)){
            $(".bill_pass").html('请填写正确的11位手机号码');
            $(".bill_hide").show();
            $(".bill_mask").show();
        }else{
            var s4='/Business/getTelOrders';
            if(date()){
                var s1=$('.date_start').val();/*获取初始购买日期*/
                var s2=$('.date_end').val();/*获取结束购买日期*/
                var s3=$('.bill_tel').val();
                window.location.href=s4+"?start_time="+s1+"&end_time="+s2+" 23:59:59"+"&tel="+s3;
            }
        }
    })
    /*点击日期清除按钮，清空input框*/
    $(document).on('click','.dwb-n',function(){
        $(".date_start").val("");
        $(".date_end").val("");
    });
    /*手机号验证*/
    $(".bill_tel").bind("input","onpropertychange",function(){
        $(this).val($(this).val().replace(/[^\d]/g,""));
    })
</script>
</body>
</html>
